import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

const myRole = "banzhuren";

// 全局注册自定义指令（当创建指令的时候，直接书写一个回调函数，这个函数默认是钩子函数中的bind）
/* Vue.directive("role", (el, binding) => {
  // 把不符合条件的按钮删除
  if (!binding.value.includes(myRole)) {
    // el.remove();
    // el.parentNode.removeChild(el);
    console.log(el, el.parentNode);
  }
}); */

// 定义指令的时候。第二个参数可以书写一个对象 这个对象内可以书写多个钩子函数，供不同的逻辑使用
Vue.directive("role", {
  bind() {
    console.log("bind");
  },
  // inserted被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
  inserted(el, binding) {
    console.log("inserted");
    if (!binding.value.includes(myRole)) {
      el.remove();
      // el.parentNode.removeChild(el);

    }
  },

  // update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前
  update() {
    console.log("update");
  },
  // componentUpdated 指令所在组件的 VNode及其子 VNode全部更新后调用
  componentUpdated() {
    console.log("componentUpdated");
  },

  // unbind 只调用一次 指令与元素解绑时调用
  unbind() {
    console.log("unbind");
  }
});

new Vue({
  render: h => h(App),
}).$mount("#app");